<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta data-vue-meta="true" data-vmid="keywords" name="keywords" content="JuLiMoll" />
		<meta data-vue-meta="true" data-vmid="description" name="description" content="JuLiMoll" />
		<title data-vue-meta="true">JuLiMoll</title>
		<link rel=icon type=image/png sizes=16x16 href="static_b/images/icon.png">
		<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.15.13/theme-chalk/index.css">
		<link rel="stylesheet" href="static_b/css/index.css">

	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header></el-header>
				<el-main>
					<el-card class="login-card">
						<div class="login-logo-img">
							<img :src="logoUrl">
						</div>
						<el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px">
							<el-form-item label="" prop="username">
								<el-input v-model="loginForm.username" placeholder="请输入用户账户">
                                    <template slot="prepend"><i class="el-icon-user"></i></template>
                                </el-input>
							</el-form-item>
							<el-form-item label="" prop="password">
								<el-input type="password" v-model="loginForm.password" show-password placeholder="请输入账户密码">
                                    <template slot="prepend"><i class="el-icon-lock"></i></template>
                                </el-input>
							</el-form-item>
                            <el-form-item size="large">
                                <el-button type="primary" @click="onSubmit" style="width: 580px;">立即登录</el-button>
                            </el-form-item>

						</el-form>
					</el-card>
				</el-main>
				<div class="copyright">
					© {{new Date().getFullYear()}} Powered by www.julimoll.fun
					<span>皖ICP备18015774号-1</span>
				</div>
			</el-container>
		</div>
		<script type="text/javascript">
			function detectIE() {
				var ua = window.navigator.userAgent;
				var msie = ua.indexOf('MSIE ');
				if (msie > 0) {
					// IE 10 or older => return version number
					return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
				}

				var trident = ua.indexOf('Trident/');
				if (trident > 0) {
					// IE 11 => return version number
					var rv = ua.indexOf('rv:');
					return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
				}

				var edge = ua.indexOf('Edge/');
				if (edge > 0) {
					// Edge (IE 12+) => return version number
					return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
				}

				// other browser
				return false;
			}
			if (detectIE()) {
				document.getElementById("app").innerHTML =
					"<div style='text-align:center;'><h1>这是一个很有意思的网站!</h1> <h2> 请使用谷歌浏览器或右键选择极速模式， 总之放弃IE浏览器! </h2></div>";
			}
		</script>
	</body>

	<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
	<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.15.13/index.js"></script>

	<script>
		var app = new Vue({
			el: '#app',
			created() {

			},
			mounted() {
			},
			computed: {},
			methods: {
				fetchToast: function (response) {
					if(response == null || response.body == null){
						this.$message({
							message: '请求服务器失败',
							type: 'error'
						});
						return false;
					}
					if(response.body.code == 104 || response.body.code == 105){
						this.$message({
							message: response.body.msg ? response.body.msg : '登录失败~',
							type: 'error'
						});
						return false;
					}
					if(response.body.code < 200){
						this.$message({
							message: response.body.msg ? response.body.msg : '服务器返回未知错误',
							type: 'error'
						});
						return false;
					}
					return true;
				},

                onSubmit: function () {
                    this.$refs['loginForm'].validate((valid) => {
                        if (valid) {
                            let that = this;
                            let req = {
                                "username": that.loginForm.username,
								"password": that.loginForm.password
                            };

                            let url = 'api/login';
                            this.$http.post(
                                url,
                                req,
                            ).then(response => {
                                if(!this.fetchToast(response)){
                                    return false;
                                }
                                if(response.body.code == 200){
									window.open('/', '_self');
								}
                            }, err => {
                                console.log(err)
                            });

                        } else {
                            return false;
                        }
                    });
                }
            },
			data: {
				logoUrl: './static_b/images/logo.png',
				loginForm: {

				},
				loginRules: {
                    username: [
                        {required: true, message: '请输入用户账户', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '请输入账户密码', trigger: 'change'}
                    ]
                }
			}
		});
	</script>
</html>
